import React, { useEffect, useState } from 'react';
import s from '../style.module.css';
import cn from 'classnames';
import BreadCrumb from '@/components/BreadCrumb';

import { Radio, Button, Confirm, Message, Loading } from '@knownsec/react-component';
import o from './style.module.css';
import i from '@/index.module.css';
import { getErrorMessage } from '@/common/constant';
import { sysSSH } from '~/API/index';

export default function HaConfig() {
  const [haStatus, setHaStatus] = useState(false);
  const [loading, setLoading] = useState(false);
  const sub = () => {
    Confirm({
      title: 'SSH配置',
      pro: true,
      className: s.w400,
      message: <div className={cn(i.tac, i.mb10, i.p20)}>您确定修改SSH配置吗？</div>,
      onconfirm: () => {
        const data = { action: haStatus ? 'on' : 'off' };
        setLoading(true);
        sysSSH(data,'POST')
          .then((res) => {
            console.log('[ res ]-26', res)
            setLoading(false);
            Message.show({
              type: res.status,
              message: res.message,
            });
          })
          .catch((err) => {
            setLoading(false);
            Message.show({
              type: 'error',
              message: getErrorMessage(err),
            });
          });
      },
    });
  };

  useEffect(() => {
    getHaConfig();
  }, []);

  const getHaConfig = () => {
    setLoading(true);
    sysSSH('','GET').then((res) => {
      setLoading(false);
      if (res.status === 'success') {
        setHaStatus(Boolean(res.data.service_status));
      }
    });
  };

  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '网络配置' },
          { link: '', name: 'SSH配置', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24)}>
            <p>SSH配置</p>
            <div className={cn(i.df, i.aic, o.item)}>
              <p className={i.pr20}>启用SSH</p>
              <div className={o.inp}>
                <Loading show={loading} appendToBody={false} />
                <Radio.Group
                  onChange={(e) => {
                    setHaStatus(e.target.value);
                  }}
                  value={haStatus}
                >
                  <Radio value={true}>是</Radio>
                  <Radio value={false}>否</Radio>
                </Radio.Group>
              </div>
            </div>
            <div className={i.mt20}>
              <Button onClick={sub} type="primary">
                确认
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
